<!DOCTYPE html>
<html lang="en">
<include file="./Application/Home/View/Layout/head.html" />

        <link href="__PUBLIC__/assets/bootstrap/css/select2.css" rel="stylesheet" />
        <link href="__PUBLIC__/assets/bootstrap/css/jquery.dataTables.min.css" rel="stylesheet">		
        <link href="__PUBLIC__/assets/bootstrap/css/jquery.dataTables.min.css" rel="stylesheet">
<style type="text/css">
   .Alertmessage{
  text-align: center;
    color: red;
 }
</style>
    <body>
        <block name="header">
           <include file="block/header"/>
        </block>
        <section>
            <div class="mainwrapper">
			   <block name="left">
			   <include file="block/left" />
               </block>
                
                <div class="mainpanel">
                    <div class="contentpanel">
                       
                        <div class="panel panel-title-head">
                         <div class="search_banner">
                                <div>
	                                <!-- <div class="pull-left col-md-1">
	                                    <h4 class="panel-title">录音查询</h4>
	                                </div> -->
	                                <div class="pull-left col-md-3">
	                                <div class="input-group" style="padding:5px;">
		                                <lable class="pull-left">新增IP地址：<input id="newIP" name="newIP" style="width:100px" type="text" value="" /></lable><br>
		                             </div>
		                             
	                                </div>
	                                <div class="pull-left col-md-8">
											<button class="btn btn-info btn-large addIP">提交</button>
											支持二级通配符，如：192.168.1.* 和 192.168.*.*都是合法地址
	                                </div>
	                                
                                </div>
                                <div style="clear:both"></div>
                            </div><!-- panel-heading -->   
                            <table id="basicTable" class="table table-striped table-bordered responsive">
                                <thead class="">
                                    <tr>
                                        <td>IP地址</td>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                         
                                <tbody>
                                </tbody>
                            </table>
                        </div><!-- panel -->
                        
                        
                            
                           
                        </div><!-- panel -->
                      
                        
                    </div><!-- contentpanel -->
                </div><!-- mainpanel --><!-- mainpanel -->
            </div><!-- mainwrapper -->
        </section>
		
        <script src="__PUBLIC__/assets/bootstrap/js/jquery-1.11.1.min.js"></script>
        <script src="__PUBLIC__/assets/bootstrap/js/bootstrap.min.js"></script>
        <script src="__PUBLIC__/assets/bootstrap/js/jquery.datatables.min.js"></script>
        <script src="__PUBLIC__/assets/bootstrap/js/custom.js"></script>
        


<script type="text/javascript">
    $(document).ready( function () {
        var canManage = "{$canManage}";
        if(canManage == 0){
            $('#alertModel2').modal('show');
            $('.Alertmessage').html('没有管理权限，请联系管理员')
            return;
        }
    var CHANNEL_TB
	CHANNEL_TB=$('#basicTable').dataTable(
	        {
	            "ajax": {  //类似jquery的ajax参数，基本都可以用。
	                "type": "post",  //后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
	                "url": '../System/ipLimint',
	                "dataSrc": "data",  //默认data，也可以写其他的，格式化table的时候取里面的数据
	                "data": function (d) {  //d 是原始的发送给服务器的数据，默认很长。
	                	d.newIP=$('#newIP').val();
	                    return d;
	                    //获取是否是查询,然后置0，0为非搜索查询
	                }
	            },
	        
	            "pagingType": "full_numbers",
	            //"sPaginationType": "full_numbers", //分页风格，full_number会把所有页码显示出来（大概是，自己尝试）
	            "sDom": "<'row-fluid inboxHeader'<'span6'<'dt_actions'>l><'span6'f>r>t<'row-fluid inboxFooter'<'span6'i><'span6'p>>", //待补充
	            "iDisplayLength": 12,  //每页显示10条数据
	            "bAutoWidth": false,  //宽度是否自动，感觉不好使的时候关掉试试
	            "bLengthChange": false,
	            "bFilter": false,
	            "oLanguage": {  //下面是一些汉语翻译
	                "sSearch": "搜索",
	                "sLengthMenu": "每页显示 _MENU_ 条记录",
	                "sZeroRecords": "没有检索到数据",
	                "sInfo": "显示 _START_ 至 _END_ 条 &nbsp;&nbsp;共 _TOTAL_ 条",
	                "sInfoFiltered": "(筛选自 _MAX_ 条数据)",
	                "sInfoEmtpy": "没有数据",
	                "sProcessing": "正在加载数据...",
	                "oPaginate":
	                        {
	                            "sFirst": "首页",
	                            "sPrevious": "前一页",
	                            "sNext": "后一页",
	                            "sLast": "末页"
	                        }
	            },
	            "bProcessing": true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好
	            "bServerSide": true, //开启服务器模式，使用服务器端处理配置datatable。注意：sAjaxSource参数也必须被给予为了给datatable源代码来获取所需的数据对于每个画。 这个翻译有点别扭。开启此模式后，你对datatables的每个操作 每页显示多少条记录、下一页、上一页、排序（表头）、搜索，这些都会传给服务器相应的值。
//	            "sAjaxSource": '__URL__/serach_nasty', //给服务器发请求的url
	            "aoColumns": [  //这个属性下的设置会应用到所有列，按顺序没有是空
	                {"mData": 'ip'},
	                {"mData": 'type'},
	                {"mData": function (mData)
	              	   {
	                      return "<a href=\'javascript:del("+mData.id+")\'>删除</a><input type='hidden' name='hid_IP' id='hid_IP' value='"+mData.ip+"'/>";
	                     }
	              	}
	            ],

	            "aoColumnDefs": [//和aoColums类似，但他可以给指定列附近属性
	                {"bSortable": false, "aTargets": [0]}, //这句话意思是第1,3,6,7,8,9列（从0开始算） 不能排序
	                {"bSearchable": false, "aTargets": [0]} //bSearchable 这个属性表示是否可以全局搜索，其实在服务器端分页中是没用的
	            ],
	            "aaSorting": [[1, "desc"]], //默认排序
	            "fnInitComplete": function (oSettings, json) { //表格初始化完成后调用 在这里和服务器分页没关系可以忽略
	                $("input[aria-controls='DataTables_Table_0']").attr("placeHolder", "请输入高手用户名");
	            }
	        });

$('.addIP').click(function(){
    var canManage = "{$canManage}";
    if(canManage == 0){
        $('#alertModel2').modal('show');
        $('.Alertmessage').html('没有管理权限，请联系管理员')
        return;
    }
	var newIP=$("#newIP").val();
	if(newIP==""){
			alert("IP地址不能为空");
			$("#newIP").focus();
			return false;
		}
	if(!isIP(newIP)){
			alert("IP格式错误，添加失败！");
			$("#newIP").focus();
			return false;
	} 

	CHANNEL_TB.fnClearTable();
    CHANNEL_TB.fnReloadAjax();
})
}) 



	function  isIP(str){
		var str1=str.split(".");
		if (str1.length!=4){	//IPv4格式，必须有4个段
			return false;
		}
		var temp=/^(\d+)\.(\d+)\.(\d{0,3}|\*+)\.(\d|\*+)/;
		if(!temp.test(str)){
			return false;
			}
		else{
			if(isNaN(str1[0])){
				return false;
			}else{
				if(parseInt(str1[0])>255 || parseInt(str1[0])<1){
					return false;	
				}	
			}
			if(isNaN(str1[1])){
				return false;
			}else if(parseInt(str1[1])>255){
				return false;	
			}
			if(str1[2]!="*"){
				if(isNaN(str1[2])){
					return false;
				}else if(parseInt(str1[2])>255){
					return false;	
				}
			}
			if(str1[3]!="*"){
				if(isNaN(str1[3])){
					return false;
				}else if(parseInt(str1[3])>255){
					return false;	
				}
			}

		}
		return true;
  	}
  	
//删除选中的记录
function del(id){
    var canManage = "{$canManage}";
    if(canManage == 0){
        $('#alertModel2').modal('show');
        $('.Alertmessage').html('没有管理权限，请联系管理员')
        return;
    }
	if(!id){
		$('#alertModel').modal('show');
		$('.Alertmessage').html('请选中要删除的记录') 
		return;
	}
    var hid_IP = $('#hid_IP').val();
	var msg="确定删除所选记录？";
	var url="delIP"
	if(confirm(msg)){
		$.ajax({
			type:"POST",
			url:url,
			data:{
				id:id,hid_IP:hid_IP	
			},
			success: function(data){
				if(data.code){
					alert(data.message);
				    window.location.reload()
				}
			}
		})
	}
	 
}

function upd(flag,ip){
	var updflag = flag;
	var updip = ip;
	 
	var url="updateIP"
	 
	$.ajax({
		type:"POST",
		url:url,
		data:{
			updflag:updflag,updip:updip	
		},
		success: function(data){
			if(data.code){
				alert(data.message);
			   // window.location.reload()
			}
		}
	})
	 
} 
</script>        
		
		
    </body>
</html>
